<template>
  <view>
    <view class="pd-bg-fff">
      <view class="follow-nav">
       <block v-for="(item,index) in navBar" :key="index">
           <view
            :data-id="item.id"
            class="nav-item"
            :class="[activeFollow==item.id?'nav-item-on':'']"
            @tap="checkNav"
            >
            {{item.text}}
            </view>
      </block>
        
      </view>
      
      <view
        class="goods-ul collect-ul"
        v-if="activeFollow==1"
      >
        <view
          class="goods-li collect-li"
          v-for="(item,index) in goodsCollects"
          :key="index"
        >
          <navigator :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id">
            <image
              class="collect-img"
              :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"
            ></image>
          </navigator>
          <view class="collect-li-cont">
            <view class="collect-name ellipsis-1">{{item.goods_name}}</view>
            <view class="collect-price collect-name">￥{{item.shop_price}}</view>
            <view class="collect-word collect-name">收藏时间:{{item.add_time_text}}</view>
            <view
              class="collect-btn"
              @tap="delGoodsFocus(index,item.goods_id)"
            >取消关注</view>
          </view>
        </view>
      </view>
      <view
        class="store-ul collect-ul"
       v-if="activeFollow==2"
      >
        <view
          class="store-li collect-li"
          v-for="(item,index) in storeCollects"
          :key="index"
        >
          <navigator :url="'/pages/store/index/index?store_id='+item.store_id">
            <image
              class="collect-img"
              :src="item.store.store_avatar"
            ></image>
          </navigator>
          <view class="collect-li-cont">
            <view class="collect-name ellipsis-1">{{item.store_name}}</view>
            <view class="store-star">
              <image
                class="star-item"
                :src="imgUrl+'/common/heart-h.png'"
                v-for="(item,index) in item.store_servicecredit"
                :key="index"
              ></image>
            </view>
            <view class="collect-word collect-name">{{item.store.store_collect}}人关注</view>
            <view
              class="collect-btn"
              @tap="delStoreFocus(index,item.store_id)"
              
            >取消关注</view>
          </view>
        </view>
      </view>
    </view>

    <block>
      <no-data :hide="ishide"></no-data>
    </block>
    
  </view>
</template>
<script>
import {getCollectList,getStoreCollectList,delGoodsFocus,delStoreFocus} from "@/api/api";
import noData from "@/components/nodata2/nodata2.vue";
import common from "@/common/common";
import config from "@/api/config";
import {mapState} from "vuex";
export default {
  data() {
      return {
          imgUrl:config.imgUrl,
          navBar:[
              {text:'商品收藏',id:1,},
              {text:'店铺收藏',id:2}
          ],
          activeFollow:1,
          goodsCollects:[],//商品收藏
          goodsTotal:"",
          storeTotal:"",
          goodsPage:1,
          storePage:1,
          storeCollects:[], //店铺收藏
          // ishide:false
      }
  },
  components:{
    noData
  },
  computed: {
    ...mapState(['imgType','goodsImgHeight','goodsImgWidth']),
    ishide(){
      if(this.goodsTotal===0&&this.activeFollow==1||this.storeTotal===0&&this.activeFollow==2){
        return true;
      }else{
        return false
      }
      
    }
  },
  onLoad(){
      this.getData()
  },
  methods: {
      getData(){
          this.getCollectList()
          this.getStoreCollectList()
      },
      getCollectList(){ //商品收藏page

          getCollectList({p:this.goodsPage}).then(res=>{
              console.log(res)
              if(res.records.length>0){
                  res.records.map(item=>{
                      if(item.original_img.indexOf('public')==1){
                          item.original_img=this.imgUrl+item.original_img
                      }
                      item.add_time_text=common.format(item.add_time,'yyyy-MM-dd hh:mm:ss')
                  })
              }
              this.goodsTotal=res.total;
              this.goodsCollects=this.goodsCollects.concat(res.records)
          })
      },
      getStoreCollectList(){ //店铺收藏
          getStoreCollectList({page:this.storePage}).then(res=>{
              console.log(res)
              if(res.records.length>0){
                  res.records.map(item=>{
                      if(!item.store.store_avatar){
                          return 
                      }
                      if(item.store.store_avatar.indexOf('public')==1){
                          item.store.store_avatar=this.hostUrl+item.store.store_avatar
                      }
                  })
              }
              
              this.storeTotal=res.total
              this.storeCollects=this.storeCollects.concat(res.records);
          })
      },
      checkNav(e){
          let id=e.currentTarget.dataset.id;
          this.activeFollow=id;
      },
      delGoodsFocus(index,id){
          delGoodsFocus(id).then(res=>{
              console.log(res)
              let that=this;
              if(res.status==1){
                  that.goodsCollects.splice(index,1)
                  if(that.goodsCollects.length==0){
                    this.goodsTotal=0;
                  }
                  common.toast('none','取消成功!',3000)
              }
          })
      },
      delStoreFocus(index,id){
          delStoreFocus(id).then(res=>{
              let that=this;
              if(res.status==1){
                  that.storeCollects.splice(index,1);
                  if(that.storeCollects.length==0){
                    that.storeTotal=0
                  }
                   common.toast('none','取消成功!',3000)
              }
          })
      },
      onReachBottom(){
          if(this.activeFollow==1){ //商品下拉
            if(this.goodsCollects.length==this.goodsTotal){
                 common.toast("none","没有了",3000)
                return false;  
            }
              this.goodsPage++;
              this.getCollectList()
            
          }else{
            if(this.storeCollects.length==this.storeTotal){
              common.toast("none","没有了",3000)
                return false;
                
            }
              this.storePage++;
              this.getStoreCollectList()   
            
            
          }
      }

  },
};
</script>
<style lang="scss">
/* collect_list.wxss */
.follow-nav{
    display: flex;
}
.nav-item{
    width:305rpx;
    padding: 0 20rpx;
    height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    overflow: hidden;
    border-bottom: 1px solid transparent;
}
.nav-item-on{
    color:#ff3b3b;
    border-bottom-color:#ff3b3b; 
}
.collect-li{
    display: flex;
    padding:20rpx 0;
    height: 180rpx; 
    border-bottom: 1px solid #f3f3f3;
}
.collect-img{
    width:180rpx;
    height:180rpx;
    margin-right: 20rpx;
    border: 1px solid #f3f3f3;
}
.collect-li-cont{
    width: 490rpx;
}
.collect-name{
    width:490rpx;
    height:30rpx;
    font-size:30rpx;
    line-height:1; 
    margin-bottom:20rpx;
}
.collect-price{
    color:#ff3b3b;
}
.collect-word{
    font-size:24rpx;
    height: 24rpx;
    color: #666;
}
.collect-btn{
    float: right;
    height: 42rpx;
    line-height: 42rpx;
    font-size: 30rpx;
    padding:0 20rpx;
    border: 1px solid #f3f3f3;
}
.store-star{
    height: 28rpx;
    margin-bottom: 20rpx;
}
.star-item{
    width: 28rpx;
    height: 26rpx;
    margin-right: 2rpx;
}
</style>